<template>
  <!-- 头部 -->
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片 -->
  <el-card class="box-card">
    <div>
      <el-button type="primary"
                 size="large"
                 @click="adduser">添加用户</el-button>
    </div>
    <!-- 列表信息 -->
    <div class=" py-4">
      <el-table :data="tableData"
                border
                style="width: 100%">
        <el-table-column type="index"
                         label="#" />
        <el-table-column prop="user_name"
                         label="用户名" />
        <el-table-column prop="email"
                         label="邮箱" />
        <el-table-column prop="phone"
                         label="电话" />
        <el-table-column prop="is_admin"
                         label="角色">
          <template #default="id">
            <div v-if="id.row.is_admin === true">超级管理员</div>
            <div v-else-if="id.row.is_admin === false">普通用户</div>
            <div v-else>管理员</div>
          </template>
        </el-table-column>
        <el-table-column label="编辑"
                         prop="id"
                         width="250px">
          <template #default="id">
            <el-button type="primary"
                       size="large"
                       :icon="Edit"
                       @click="edit(id.row.id)">编辑</el-button>
            <el-button type="danger"
                       size="large"
                       :icon="Delete"
                       @click="deletes(id.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
  <!-- 编辑弹出框 -->
  <el-dialog v-model="dialogFormVisible"
             title="编辑用户">
    <el-form :model="form">
      <!-- 用户名 -->
      <el-form-item label="用户名"
                    :label-width="formLabelWidth">
        <el-input v-model="form.user_name"
                  autocomplete="off"
                  disabled />
      </el-form-item>
      <!-- 邮箱 -->
      <el-form-item label="邮箱"
                    :label-width="formLabelWidth">
        <el-input v-model="form.email"
                  autocomplete="off" />
      </el-form-item>
      <!-- 手机号 -->
      <el-form-item label="手机号"
                    :label-width="formLabelWidth">
        <el-input v-model="form.phone"
                  autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary"
                   @click="EditYes(form.id)">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 添加用户弹出框 -->
  <el-dialog v-model="addFormVisible"
             title="添加用户"
             @close="AddClosed">
    <el-form :model="addform">
      <!-- 用户名 -->
      <el-form-item label="用户名"
                    :label-width="formLabelWidth">
        <el-input v-model="addform.user_name"
                  autocomplete="off" />
      </el-form-item>
      <!-- 密码 -->
      <el-form-item label="密码"
                    :label-width="formLabelWidth">
        <el-input v-model="addform.password"
                  autocomplete="off"
                  type="password"
                  show-password />
      </el-form-item>
      <!-- 邮箱 -->
      <el-form-item label="邮箱"
                    :label-width="formLabelWidth">
        <el-input v-model="addform.email"
                  autocomplete="off" />
      </el-form-item>
      <!-- 手机号 -->
      <el-form-item label="手机号"
                    :label-width="formLabelWidth">
        <el-input v-model="addform.phone"
                  autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addFormVisible = false">取消</el-button>
        <el-button type="primary"
                   @click="addYes">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { list, getuser, deletel, addTo, editList } from '@/api/manager.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Edit, Delete } from '@element-plus/icons-vue'
// 编辑用户表单
const form = reactive({
  id: '',
  user_name: '',
  email: '',
  phone: ''
})
// 添加用户表单
const addform = reactive({
  user_name: '',
  password: '',
  email: '',
  phone: ''
})

export default {
  name: 'Index',
  setup () {
    let tableData = ref([])
    const dialogFormVisible = ref(false)
    const addFormVisible = ref(false)
    const formLabelWidth = '60px'
    // Get请求 获取list 列表数据
    list().then(res => {
      tableData.value = res.data.result
    })
    // 编辑个人信息
    const edit = (value) => {
      getuser(value).then(res => {
        form.id = res.data.result[0].id
        form.user_name = res.data.result[0].user_name
        form.email = res.data.result[0].email
        form.phone = res.data.result[0].phone
      })
      dialogFormVisible.value = true
    }
    // 确定修改按钮
    const EditYes = (value) => {
      dialogFormVisible.value = false
      editList(form.email, form.phone, value).then(res => {
        ElMessage({
          message: res.data.message,
          type: 'success',
          duration: 800
        })
        // 重新调用获取列表接口
        list().then(res => {
          tableData.value = res.data.result
        })
      }).catch(err => {
        ElMessage({
          message: err.response.data.message,
          type: 'error',
          duration: 800
        })
      })
    }
    // 删除用户
    const deletes = (value) => {
      ElMessageBox.confirm(
        '确定要删除此用户?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        // 删除用户接口
        deletel(value).then(res => {
          // 重新调用获取列表接口
          list().then(res => {
            tableData.value = res.data.result
          })
          ElMessage({
            type: 'success',
            message: '删除用户成功!',
            duration: 800
          })
        }).catch(err => {
          ElMessage({
            message: err.response.data.message,
            type: 'error',
            duration: 800
          })
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除用户!',
          duration: 800
        })
      })
    }
    // 点击添加用户弹出弹窗按钮
    const adduser = () => {
      addFormVisible.value = true
    }
    // 添加用户
    const addYes = () => {
      addFormVisible.value = false
      addTo(addform).then(res => {
        ElMessage({
          message: res.data.message,
          type: 'success',
          duration: 800
        })
        // 重新调用获取列表接口
        list().then(res => {
          tableData.value = res.data.result
        })
        // 清除原先的数值
        // addform.user_name = ''
        // addform.password = ''
        // addform.email = ''
        // addform.phone = ''
      }).catch(err => {
        ElMessage({
          message: err.response.data.message,
          type: 'error',
          duration: 800
        })
      })
    }
    // 监听添加用户关闭
    const AddClosed = () => {
      addform.user_name = ''
      addform.password = ''
      addform.email = ''
      addform.phone = ''
    }
    return {
      ArrowRight,
      tableData,
      edit,
      dialogFormVisible,
      form,
      formLabelWidth,
      EditYes,
      deletes,
      addform,
      addFormVisible,
      adduser,
      addYes,
      Edit,
      Delete,
      AddClosed
    }
  }
}
</script>

<style lang="less" scoped>
.box-card {
  width: 100%;
  margin-top: 20px;
}
</style>